<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calendar</title>
<script language="javascript" type="text/javascript" src="raphael-min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.js"></script>

<script language="javascript">
var configuration = {
	holderWidth : 640,
	holderHeight : 480,
	lineOffsetX : 10,
	lineOffsetY : 20,
	headerTextArray : ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi"],
	headerHeight : 40,
	headerFontSize : 18 /*px*/,
	hourHeight : 40,
	hoursArray : ["08","09","10","11","12","13","14","15","16","17","18"],
	hoursWidth : 50,
	hoursFontSize : 10
};
configuration.nbCols = configuration.headerTextArray.length;
configuration.colWidth = (configuration.holderWidth - configuration.lineOffsetX - configuration.lineOffsetX - configuration.hoursWidth) / configuration.nbCols;

window.onload = function () {

	var paper = Raphael("holder", configuration.holderWidth, configuration.holderHeight);


	// DESSIN DU CALNDRIER VIDE
	// bordure
    paper.rect(0,0, configuration.holderWidth, configuration.holderHeight,10).attr({fill: "#fff4bc", stroke: "#000", opacity: 1});

	// colonnes
	for(var i=0; i<configuration.nbCols; i++) {
		paper.path("M "+ (configuration.hoursWidth+configuration.lineOffsetX + (i*configuration.colWidth)) +" " + configuration.lineOffsetY + " L "+ (configuration.hoursWidth+configuration.lineOffsetX + (i*configuration.colWidth)) +" "+ (configuration.holderHeight - configuration.lineOffsetY) ).attr({stroke: "#aaa"});
		// texte centre par defaut
		var textObj = paper.text( configuration.hoursWidth+configuration.lineOffsetX + (i*configuration.colWidth) + (configuration.colWidth/2) , configuration.headerHeight - configuration.headerFontSize, configuration.headerTextArray[i]).attr({font: configuration.headerFontSize + 'px "Arial"'});
		textObj.attr({fill: "#555"});
		//DEBUG
		//paper.circle( configuration.hoursWidth+configuration.lineOffsetX + (i*configuration.colWidth) , configuration.headerHeight - 10, 2).attr({fill: "#f00"});

	}
	// derniere ligne
	paper.path("M "+ (configuration.hoursWidth+configuration.lineOffsetX + (configuration.nbCols*configuration.colWidth)) +" " + configuration.lineOffsetY + " L "+ (configuration.hoursWidth+configuration.lineOffsetX + (configuration.nbCols*configuration.colWidth)) +" "+ (configuration.holderHeight - configuration.lineOffsetY) ).attr({stroke: "#aaa"});
	
	// ligne horizontale fin d'entete
	var ligneH = paper.path("M "+configuration.lineOffsetX+" "+configuration.headerHeight+" L "+(configuration.holderWidth-configuration.lineOffsetX)+" "+configuration.headerHeight );
	ligneH.attr({stroke: "#000"});

	// lignes horizontales
	for(var i=0;i<configuration.hoursArray.length;i++) {
		var ligneH1 = paper.path("M "+configuration.lineOffsetX+" "+(configuration.headerHeight + (i*configuration.hourHeight))+" L "+(configuration.holderWidth-configuration.lineOffsetX)+" "+(configuration.headerHeight + (i*configuration.hourHeight)) );
		ligneH1.attr({stroke: "#999"});
		
		var textObj = paper.text( configuration.lineOffsetX + 5 , (configuration.headerHeight + (i*configuration.hourHeight)) + (configuration.hoursFontSize/2), configuration.hoursArray[i] + "h00").attr({font: configuration.hoursFontSize + 'px "Arial"',"text-anchor": "start"});
		textObj.attr({fill: "#555"});
		//DEBUG
		//paper.circle( configuration.lineOffsetX + 5 , (configuration.headerHeight + (i*configuration.hourHeight))+ configuration.hoursFontSize, 2).attr({fill: "#f00"});
	}
	// derniere ligne
	//var ligneH1 = paper.path("M "+configuration.lineOffsetX+" "+(configuration.headerHeight + (configuration.hoursArray.length*configuration.hourHeight))+" L "+(configuration.holderWidth-configuration.lineOffsetX)+" "+(configuration.headerHeight + (configuration.hoursArray.length*configuration.hourHeight)) );
	//ligneH1.attr({stroke: "#999"});
	

	// DESSIN DES RESERVATIONS
	
	var resa1 = drawReservation(paper,"Mardi","10","11").attr({fill: "#22f", stroke: "#000", opacity: 0.8});
	var textObj1 = paper.text( resa1.getBBox().x + (resa1.getBBox().width/2), 
			resa1.getBBox().y + (resa1.getBBox().height/2), 
			"Reservation").attr({font: configuration.hoursFontSize + 'px "Arial"'});
	textObj1.attr({fill: "#000"});
	
	

	var resa = drawReservation(paper,"Vendredi","12","14").attr(
			{fill: "#bebeff", stroke: "#444", opacity: 1}
		);
	paper.rect(resa.getBBox().x+1, resa.getBBox().y+1, resa.getBBox().width-2, resa.getBBox().height-2, 4).attr(
			{stroke: "none", gradient: "270-rgba(255, 255, 255, 0)-rgba(200, 200, 255, 1):75",opacity: 0}
		);

	var textObj = paper.text( resa.getBBox().x + (resa.getBBox().width/2),
			resa.getBBox().y + (resa.getBBox().height/2),
			"Reservation").attr({font: configuration.hoursFontSize + 'px "Arial"'});
	textObj.attr({fill: "#000"});

	
};

function drawReservation(paper, reservationDay, reservationStart, reservationStop){

	// TODO
	var dayNum = configuration.headerTextArray.indexOf(reservationDay);
	var hourNum = configuration.hoursArray.indexOf(reservationStart);
	var hourAmount = configuration.hoursArray.indexOf(reservationStop) - hourNum;
	
	
	var reservationX = (configuration.hoursWidth+configuration.lineOffsetX + (dayNum*configuration.colWidth));
	var reservationY = (configuration.headerHeight + (hourNum*configuration.hourHeight));
	var reservationHeight = hourAmount*configuration.hourHeight;
	reservation = paper.rect(reservationX, reservationY, configuration.colWidth - 10, reservationHeight, 4);
	// DEBUG
	// TOP-LEFT corner
	//paper.circle(resa.getBBox().x, resa.getBBox().y, 2).attr({fill: "#f00"});
	// CENTER
	//paper.circle(resa.getBBox().x + (resa.getBBox().width/2), resa.getBBox().y + (resa.getBBox().height/2), 2).attr({fill: "#f00"});

	return reservation;
}
</script>

</head>
<body style="background-color: #d0d0d0">
	<div id="holder"></div>
</body>
</html>